//
// Paging
// --------------------------------------------------

.paging {
	margin-top: 20px;
	@include inline-block;
	@include clearfix;
}

.page-nav {
    float: left;
    font-size: 0;
}

.page-item {
    cursor: pointer;
    @include inline-block;
    font-size: ceil($font-size/1.2);
    line-height: 20px;
    color: #5B5F63;
    min-width: 20px;
    text-align: center;
    padding: 5px;
    border-radius: $border-radius/2;
    margin-right: 5px;
    border: 1px solid $border-color;
    text-decoration: none;
    transition: all 1s ease;
	&:hover,
	&:focus {
		color: $primary-color;
	}
	&.page-divider {
		cursor: text;
		&:hover,
		&:focus {
			color: #5B5F63;
		}
	}
    &.active {
    	color: #fff;
	    background-color: $primary-color;
	    border-color: $primary-color;
		&:hover,
		&:focus {
			color: #fff;
		}
	}
	&.disabled {
		@include opacity(0.5);
	    cursor: not-allowed;
		&:hover,
		&:focus {
			color: #5B5F63;
		}
	}

	&.page-prev, &.page-next {
		padding: 5px 10px;
	}
	&.page-prev {
		margin-right: 10px;
	}
	&.page-next {
		margin-left: 5px;
		margin-right: 0;
	}
}

.page-count {
	float: left;
	margin-left: 20px;
	padding: 5px 0;
	> span {
		color: $primary-color;
		margin: 0 6px;
	}
}

.page-skip {
    float: left;
    margin-left: 20px;
    .page-input {
	    width: 35px;
	    height: 30px;
	    line-height: 30px;
	    font-size: ceil($font-size/1.2);
	    text-align: center;
	    padding-top: 0;
	    padding-bottom: 0;
	    margin: 0 8px;
	    outline: none;
	    border: 1px solid $border-color;
	    border-radius: $border-radius/2;
	}
	.page-btn {
	    padding: 0;
	    border: 0;
	    background-color: transparent;
	    margin-left: 20px;
	    min-width: 30px;
	    transition: all 1s ease;
	    @include hover-focus {
	    	color: $primary-color;
	    }
	}
}